.closeable {
    z-index: 1;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    line-height: 1;
    align-items: center;
    width: var(--auto-padding);
    height: var(--auto-padding);
    box-sizing: border-box;
    cursor: pointer;
    font-size: var(--auto-font-size);
    border-radius: 50%;
    background: color-mix(in hsl, currentColor, white 50%);
    font-family: Helvetica;
    user-select: none;
    opacity: 0.6;
    mask-image: url("");
    mask-size: cover;
    -webkit-mask-size: cover;

    &:hover {
        background: color-mix(in hsl, currentColor, black 20%);
    }

    &:active {
        opacity: 0.9;
    }
}